

<!--<template>-->
<!--  <p>登录页面</p>-->
<!--  <div class="mb-4">-->
<!--    <el-button>Default</el-button>-->
<!--    <el-button type="primary">Primary</el-button>-->
<!--    <el-button type="success">Success</el-button>-->
<!--    <el-button type="info">Info</el-button>-->
<!--    <el-button type="warning">Warning</el-button>-->
<!--    <el-button type="danger">Danger</el-button>-->
<!--  </div>-->
<!--  -->

<!--</template>-->

<!--<style scoped>-->

<!--</style>-->
<!--<script >-->

<!--</script>-->
<!--<template>-->
<!--  <div class="login-container">-->
<!--    <el-card class="box-card">-->
<!--      <template #header>-->
<!--        <div class="card-header">-->
<!--          <span>用户登录</span>-->
<!--        </div>-->
<!--      </template>-->
<!--      <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px">-->
<!--        <el-form-item label="用户名" prop="username">-->
<!--          <el-input v-model="form.username" placeholder="请输入用户名"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="密码" prop="password">-->
<!--          <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>-->
<!--          <el-button @click="resetForm('loginForm')">重置</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </el-card>-->
<!--  </div>-->
<!--</template>-->

<!--<script lang="ts">-->
<!--import { defineComponent, reactive, ref } from 'vue';-->
<!--import { ElForm, ElFormItem, ElInput, ElButton, ElCard } from 'element-plus';-->
<!--import { useRouter } from 'vue-router';-->

<!--export default defineComponent({-->
<!--  components: {-->
<!--    ElForm,-->
<!--    ElFormItem,-->
<!--    ElInput,-->
<!--    ElButton,-->
<!--    ElCard,-->
<!--  },-->
<!--  setup() {-->
<!--    const loginForm = ref<InstanceType<typeof ElForm>>();-->
<!--    const form = reactive({-->
<!--      username: '',-->
<!--      password: '',-->
<!--    });-->

<!--    const rules = reactive({-->
<!--      username: [-->
<!--        { required: true, message: '请输入用户名', trigger: 'blur' },-->
<!--        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },-->
<!--      ],-->
<!--      password: [-->
<!--        { required: true, message: '请输入密码', trigger: 'blur' },-->
<!--        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },-->
<!--      ],-->
<!--    });-->

<!--    const router = useRouter();-->

<!--    const submitForm = (formName: string) => {-->
<!--      (loginForm.value as InstanceType<typeof ElForm>).validate((valid: boolean) => {-->
<!--        if (valid) {-->
<!--          alert('登录成功！');-->
<!--          router.push('/dashboard'); // 登录成功后跳转到首页-->
<!--        } else {-->
<!--          console.log('验证失败');-->
<!--          return false;-->
<!--        }-->
<!--      });-->
<!--    };-->

<!--    const resetForm = (formName: string) => {-->
<!--      (loginForm.value as InstanceType<typeof ElForm>).resetFields();-->
<!--    };-->

<!--    return {-->
<!--      loginForm,-->
<!--      form,-->
<!--      rules,-->
<!--      submitForm,-->
<!--      resetForm,-->
<!--    };-->
<!--  },-->
<!--});-->
<!--</script>-->

<!--<style scoped>-->
<!--.login-container {-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  height: 100vh;-->
<!--}-->

<!--.box-card {-->
<!--  width: 400px;-->
<!--}-->

<!--.card-header {-->
<!--  text-align: center;-->
<!--  font-size: 18px;-->
<!--  font-weight: bold;-->
<!--}-->
<!--</style>-->
<template>

  <div class="login-container">

  <el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="用户名">
      <el-input v-model="form.username" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.pwd" type="password"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">登录</el-button>

    </el-form-item>
  </el-form>
  </div>
</template>
<style>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  //height: 100vh;
}
</style>
<script >
import axios from "axios";

export default {
  data(){
    return{
      info:null,
      form:{
        username:'',
        pwd: ''

      }
    }
  },
  methods:{
    onSubmit(){
      axios.post('http://127.0.0.1:8000/login', {
        username: this.form.username,
            pwd: this.form.pwd
      }).then(res =>{
        if(res.data.code == 200){
          console.log('hello')
        }
      })
      // axios.get('http://127.0.0.1:8000/login'+'?username='+this.form.username+'&pwd='+this.form.pwd).then(res =>{
      //   if(res.data.code == 200){
      //     console.log('hello')
      //   }
      // })




    }
  }
}






</script>